<h4>添加文章</h4>
<form nz-form style="margin-top: 20px;" #form="ngForm">

  <div nz-row nzGutter="24">
    <div nz-col nzSm="12">
      <nz-form-item>
        <nz-form-label nzSpan="6">文章标题</nz-form-label>
        <nz-form-control nzSpan="18" [nzValidateStatus]="title.control">
          <input nz-input name="title" placeholder="文章标题" [(ngModel)]="addArticle.title" #title="ngModel"/>
          <div nz-form-explain *ngIf="title.dirty&&title.invalid">必须填写!</div>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzSpan="6">是否置顶</nz-form-label>
        <nz-form-control nzSpan="6" [nzValidateStatus]="is_top.control">
          <nz-select name="is_top" required [(ngModel)]="addArticle.is_top" #is_top="ngModel">
            <nz-option nzLabel="是" [nzValue]="true"> </nz-option>
            <nz-option nzLabel="否" [nzValue]="false"> </nz-option>
          </nz-select>
          <div nz-form-explain *ngIf="is_top.dirty&&is_top.invalid">必须填写!</div>
        </nz-form-control>

        <nz-form-label nzSpan="6">是否原创</nz-form-label>
        <nz-form-control nzSpan="6" [nzValidateStatus]="is_original.control">
          <nz-select name="is_original" required [(ngModel)]="addArticle.is_original" #is_original="ngModel">
            <nz-option nzLabel="是" [nzValue]="true"> </nz-option>
            <nz-option nzLabel="否" [nzValue]="false"> </nz-option>
          </nz-select>
          <div nz-form-explain *ngIf="is_original.dirty&&is_original.invalid">必须填写!</div>
        </nz-form-control>

      </nz-form-item>
    </div>

    <div nz-col nzSm="12">
      
      <nz-form-item>
        <nz-form-label nzSpan="6">banner图片</nz-form-label>
        <nz-form-control nzSpan="18" [nzValidateStatus]="pics.control">
          <app-upload-file [(ngModel)]="addArticle.pics" #pics="ngModel" maxSize="100" name="pics"></app-upload-file>
          <div nz-form-explain *ngIf="title.dirty&&title.invalid">必须填写!</div>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  
  <div nz-row nzGutter="24">
    <div nz-col nzSm="24">
      <nz-form-item>
        <nz-form-label nzSpan="3">文章类型</nz-form-label>
        <nz-form-control nzSpan="12" [nzValidateStatus]="type_id.control">
          <nz-select
            required
            name="type_id"
            nzPlaceHolder="文章类型"
            #type_id="ngModel"
            [nzFilterOption]="false"
            [(ngModel)]="addArticle.type_id"
            [nzNotFoundContent]="'无法找到'"
            [nzShowSearch]="true">
            <nz-option *ngFor="let option of typeAjaxList"
              [nzLabel]="option.type_name"
              [nzValue]="option.id">
            </nz-option>
          </nz-select>
          <div nz-form-explain *ngIf="type_id.dirty&&type_id.invalid">必须填写!</div>
        </nz-form-control>
      </nz-form-item>
    </div>

  </div>
  
  <div nz-row nzGutter="24">
    <div nz-col nzSm="24">
      <nz-form-item>
        <nz-form-label nzSpan="3">摘要</nz-form-label>
        <nz-form-control nzSpan="12" [nzValidateStatus]="abstract.control">
          <textarea nz-input name="abstract" [(ngModel)]="addArticle.abstract" row="4" [nzAutosize]="{ minRows: 2, maxRows: 6 }" nzPlaceHolder="摘要" #abstract="ngModel"></textarea>
          <div nz-form-explain *ngIf="abstract.dirty&&abstract.invalid">必须填写!</div>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  
  <div nz-row nzGutter="24">
    <div nz-col nzSm="24">
      <nz-form-item>
        <nz-form-label nzSpan="3">文章内容</nz-form-label>
        <nz-form-control nzSpan="21" [nzValidateStatus]="content.control">
          <app-editor required [(ngModel)]="addArticle.content" #content="ngModel" name="content"></app-editor>
          <div nz-form-explain *ngIf="content.dirty&&content.invalid">必须填写!</div>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>

  <div nz-row nzGutter="24">
    <div nz-col nzSm="24">
      <nz-form-item>
        <nz-form-label nzSpan="3">标签</nz-form-label>
        <nz-form-control nzSpan="18">
          <label *ngFor="let item of tagList" nz-checkbox [(ngModel)]="checkedTag[item.id]" name="tag_{{item.id}}" [ngModelOptions]="{standalone: true}">
            <span>{{item.name}}</span>
          </label>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  
  <nz-form-item nz-row>
    <nz-form-control nzSpan="20" nzOffset="2">
      <button nz-button nzType="primary" (click)="save()" [nzLoading]="isConfirmLoading">保存</button>
      <button nz-button nzType="default" (click)="back()">取消</button>
    </nz-form-control>
  </nz-form-item>

</form>